<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绝对定位与遮罩</title>
  <link rel="stylesheet" href="../css/common.css">

  <link rel="stylesheet" href="css/h01.css">
</head>

<body>

  <div class="box01">
    参照物
  </div>

  <div class="box01 box02">
    绝对定位
  </div>

  <div class="box01 box03">
    绝对定位2
  </div>

  <hr>
  <!-- 容器相对定位的绝对定位（强烈推荐） -->
  <div class="box04">
    <div class="box05">定位一</div>
    <div class="box06">定位二</div>
    <div class="box07">定位三</div>
  </div>

  <hr>

  <!-- 一个小特效 -->
  <div class="texiao">
    <div>正常显示内容部分</div>

    <div>遮罩的部分</div>
    <!-- 熵增定律 -->
  </div>

  <!-- 圆点提示信息 -->
  <div class="yuan-box">
    <div>内容，黑暗骑士，蝙蝠侠</div>

    <div>圆</div>

  </div>



  <hr>

</body>

</html>